<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolBar" style="float:left;padding-top: 10px;padding-left: 50px;">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-form-item prop="orderId">
          <el-input v-model="filters.orderId" placeholder="订单号" style="width: 10em"></el-input>
        </el-form-item>
        <el-form-item prop="sku">
          <el-input v-model="filters.sku" placeholder="SKU" style="width: 10em"></el-input>
        </el-form-item>
        <el-form-item prop="shop">
          <el-select v-model="filters.shop" :clearable="true" placeholder="店铺" style="width: 10em">
            <el-option v-for="item in shops"
                       :key="item"
                       :label="item"
                       :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="type">
          <el-select v-model="filters.type" clearable filterable placeholder="交易类型" style="width: 11em">
            <el-option v-for="item in orderType"
                       :key="item.label"
                       :label="item.value"
                       :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="tradeMonthRange">
          <el-date-picker
            style="width: 20em"
            v-model="filters.tradeMonthRange"
            type="monthrange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            value-format="yyyy-MM"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <kt-button type="primary"
                     icon="fa fa-search"
                     :label="$t('action.search')"
                     perms="sale:order:view"
                     @click="findPage"/>
        </el-form-item>
        <el-form-item>
          <kt-button type="primary"
                     icon="fa fa-refresh"
                     :label="$t('action.reset')"
                     perms="sale:order:view"
                     @click="reset"/>
        </el-form-item>
        <el-form-item>
          <kt-button type="primary"
                     icon="fa fa-filter"
                     label="列显示"
                     perms="sale:order:view"
                     @click="displayFilterColumnDialog"/>
        </el-form-item>
      </el-form>
      <!--表格显示列界面-->
      <table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns"
                                  @handleFilterColumns="handleFilterColumns">
      </table-column-filter-dialog>
    </div>

    <!--表格内容栏-->
    <kt-table :data="pageResult" :columns="filterColumns" :exec-summary="true" @findPage="findPage"></kt-table>
  </div>
</template>

<script>
import KtTable from '../core/KtTable'
import KtButton from '../core/KtButton'
import TableColumnFilterDialog from '../core/TableColumnFilterDialog'

export default {
  name: "Order",
  components: {
    KtTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      size: 'small',
      filters: {
        sku: '',
        shop: '',
        type: '',
        orderId: '',
        tradeMonthRange: [],
      },
      columns: [],//初始表格列显示字段
      filterColumns: [],//列显示过滤字段
      pageRequest: {},
      pageResult: {},
      operation: false,//true新增 false编辑
      dialogVisible: false,//新增编辑界面是否显示
      editLoading: false,
      shops: [], //店铺信息
      orderType: [
        {label: 'Order', value: '订单'}
      ],
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()]);
          }
        }, {
          text: '上个月',
          onClick(picker) {
            const start = new Date();
            start.setMonth(start.getMonth() - 1);
            picker.$emit('pick', [start, start]);
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date().getFullYear(), 0);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 3);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 6);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }

  },
  methods: {
    // 处理表格列过滤显示
    initColumns() {
      this.columns = [
        {prop: "shop", label: "店铺", minWidth: 80},
        {prop: "sku", label: "SKU", minWidth: 120},
        {prop: "orderId", label: "订单号", minWidth: 150, showOverflow: true},
        {prop: "typeDesc", label: "交易类型", minWidth: 120, showOverflow: true},
        {prop: "quantity", label: "数量", minWidth: 70, formatter: true},
        {prop: "productSales", label: "销售额($|€)", minWidth: 70, formatter: true},
        {prop: "productSalesTax", label: "销售税($|€)", minWidth: 70, formatter: true},
        {prop: "shippingCredits", label: "运费款项($|€)", minWidth: 80, formatter: true},
        {prop: "shippingCreditsTax", label: "运费款项税($|€)", minWidth: 90, formatter: true},
        {prop: "promotionalRebates", label: "促销返点($|€)", minWidth: 80, formatter: true},
        {prop: "promotionalRebatesTax", label: "促销返点税($|€)", minWidth: 90, formatter: true},
        {prop: "marketplaceWithheldTax", label: "商城预扣税($|€)", minWidth: 90, formatter: true},
        {prop: "sellingFees", label: "佣金($|€)", minWidth: 60, formatter: true},
        {prop: "fbaFees", label: "FBA配送费($|€)", minWidth: 90, formatter: true},
        {prop: "otherTransactionFees", label: "其他交易费用($|€)", minWidth: 100, formatter: true},
        {prop: "otherFees", label: "其他费用($|€)", minWidth: 80, formatter: true},
        {prop: "total", label: "应得收入($|€)", minWidth: 80, formatter: true},
        {prop: "tradeDate", label: "交易日期", minWidth: 100},
        {prop: "createTime", label: "导入时间", minWidth: 135}
      ];
      this.filterColumns = JSON.parse(JSON.stringify(this.columns));
    },
    //获取店铺信息
    findShops() {
      this.shops = localStorage.getItem('authorizedShops').split(',');
    },
    //处理表格列过滤显示
    displayFilterColumnDialog() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    //获取分页数据
    findPage(data) {
      if ((data !== null && typeof data !== 'undefined') && typeof data.pageRequest !== 'undefined') {
        this.pageRequest = data.pageRequest;
      }
      if (this.filters.tradeMonthRange === null) {
        this.filters.tradeMonthRange = [];
      }
      this.pageRequest.params = {
        sku: this.filters.sku,
        shop: this.filters.shop,
        type: this.filters.type,
        orderId: this.filters.orderId,
        fromTradeMonth: this.filters.tradeMonthRange.length >= 1 ? this.filters.tradeMonthRange[0] : '',
        toTradeMonth: this.filters.tradeMonthRange.length === 2 ? this.filters.tradeMonthRange[1] : '',
      };
      this.$api.order.findPage(this.pageRequest).then((res) => {
        if (res.code === 200) {
          this.pageResult = res.data;
          this.convertType(this.pageResult);
        }
      }).then((data !== null && typeof data !== 'undefined') ? data.callback : '');
    },
    convertType(pageResult) {
      let orderList = pageResult.content;
      orderList.forEach(
        o => {
          this.orderType.forEach(
            t => {
              if (o.type === t.label) {
                o.typeDesc = t.value;
              }
              if (o.typeDesc === '') {
                o.typeDesc = o.type;
              }
            }
          )
        }
      )
    },
    findOrderType() {
      this.$api.dict.findByType({type: 'order_trade_type'}).then((res) => {
        if (res.code === 200) {
          this.orderType = res.data;
        }
      })
    },
    //重置搜索条件
    reset() {
      this.$refs['filters'].resetFields();
      this.findPage();
    }
  },
  mounted() {
    this.findShops();
    this.findOrderType();
    this.initColumns();
  }
}
</script>

<style scoped>

</style>
